<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1,IE=9">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="LEUR DE CHINE">
	<meta name="keywords"
		  content="china reds,china blues,cashmere,corduroy,little bag,tartans,tweeds,stars,stripes,linen,leather,tassel travel bag,tartan,accessories">
	<title>上药神象农业物联网监控系统</title>
	<!--[if lte IE 8]>
	<script>window.location.href = 'http://cdn.dmeng.net/upgrade-your-browser.html?referrer=' + location.href;</script>
	<![endif]-->
	<script type="text/javascript" src="${basePath}/pc/lib/respond/respond.src.js"></script>
	<link href="${basePath}/pc/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="${basePath}/pc/css/font-awesome.min.css" rel="stylesheet">
	<link href="${basePath}/pc/lib/iconfont/css/iconfont.css" rel="stylesheet">
	<link href="${basePath}/pc/css/main.css" rel="stylesheet">
	<!--[if lt IE 9]>
	<script src="${basePath}/pc/lib/bootstrap/js/html5shiv.min.js"></script>
	<script src="${basePath}/pc/lib/bootstrap/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>


<div class="wrp">
	<nav class="navbar navbar-inverse cm_nav">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
						aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="javascript:void(0);">
					<img src="${basePath}/pc/img/logo_white.png" class="img-responsive">
				</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav mnav">
					<li class="active">
						<a href="${basePath}/pc/user/main">监控数据</a>
					</li>
					<li>
						<a href="${basePath}/function/pc/farmwork">农事记录</a>
					</li>
				</ul>
				<ul class="navbar-nav navbar-right smenu">
					<li class="wl_fnt">
						<a><i class="iconfont icon-account"></i>欢迎：<span class="username"></span></a>
					</li>
					<li class="ext_lnk">
						<a href="${basePath}/logout"><i class="iconfont icon-exit1"></i>退出</a>
					</li>
				</ul>

			</div>
			<!--/.nav-collapse -->
		</div>
	</nav>

	<div class="pgc">
		<div class="container">
			<div class="cls">
				<div class="tbar mtbar">
					<a href="javascript:history.go(-1);" class="bk_lnk"><i class="iconfont icon-left"></i></a>
					<div class="dropdown slt_eqm">
						<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#"
						   href="javascript:;">
							--- 请选择设备 --- <span class="caret"></span>
						</a>
						<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
							<li class="dropdown-submenu" data-stopPropagation="true">
								<a tabindex="-1" href="javascript:;">传感器组</a>
								<ul class="dropdown-menu sensorGroup"></ul>
							</li>
							<li class="dropdown-submenu" data-stopPropagation="true">
								<a tabindex="-1" href="javascript:;">水体EC</a>
								<ul class="dropdown-menu ec"></ul>
							</li>
							<li class="dropdown-submenu" data-stopPropagation="true">
								<a tabindex="-1" href="javascript:;">枪机</a>
								<ul class="dropdown-menu qj"></ul>
							</li>
							<li class="dropdown-submenu" data-stopPropagation="true">
								<a tabindex="-1" href="javascript:;">球机</a>
								<ul class="dropdown-menu uj"></ul>
							</li>
						</ul>
					</div>

					<!--dropdown end-->
					<div class="hsty_data">
						<div class="dropdown">
							<a  data-toggle="dropdown" class="btn btn-default">
								--- 查看历史记录 ---<span class="caret"></span>
							</a>
							<ul class="dropdown-menu multi-level totalTime">
								<li></li>
							</ul>
						</div><!--dropdown end-->

						<div class="clr-b"></div>
					</div><!--hsty_data end-->
					<div class="clr-b"></div>
				</div>
				<!--tbar end-->
				<div class="cnt_pd">
					<div class="dt_menu">
						<ul class="list-group">
							<li class="list-group-item frt_tit"><h2 class="tit">水体EC${index}号</h2></li>
							<li class="list-group-item crt"  style="cursor:pointer;">
								<a>水体EC传感器</a>
							</li>
						</ul>
					</div><!--dt_menu end-->
					<div class="dt_shw">
						<div class="dt_hdr nowValue">
							<span class="dt_date">更新日期：
                                <span class="time"></span>
                            </span>
 						</div><!--dt_hdr end-->
						<div class="data_curve" style="position: relative;">
						</div><!--data_curve end-->
					</div><!--dt_shw end-->
				</div>
				<!--cnt_pd end-->
			</div>
			<!--cls end-->
		</div>
	</div>
	<!--pgc end-->
	<footer class="ftr">Copyright<span class="cpy">&copy;</span>2017 上海上药神象健康药业有限公司</footer>
</div>
<!--wrp end-->
<script type="text/javascript" src="${basePath}/pc/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/pc/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${basePath}/common/js/common.js"></script>
<script type="text/javascript" src="${basePath}/common/js/ajax.js"></script>
<script type="text/javascript" src="${basePath}/common/js/form.js"></script>
<script type="text/javascript" src="${basePath}/common/js/date.js"></script>
<script type="text/javascript" src="${basePath}/pc/js/custom.js"></script>
<script type="text/javascript" src="${basePath}/pc/baidu/echarts.min.js"></script>
<script type="text/javascript" src="${basePath}/pc/js/option.js"></script>
<script type="text/javascript">
    function loadData(url,historyUrl) {
        AsyncGet(url,{id:"${id}"},function(value){
            for(var i=0;i<value.data.length;i++){
                if(document.getElementById('chart'+(i+1))==null){
                    var div=$('<div style="display: inline-block;"></div>');
                    var icon=$('<img align="absmiddle" style="display: inline-block;">');
                    icon.attr("src","${basePath}/function/getSensorImage?path="+value.data[i].icon);
                    var span=$('<span>'+value.data[i].value+value.data[i].unit+'</span>');
                    div.append(icon).append(span);

                    var date=new Date(value.data[i].time);
                    $(".nowValue .time").text(date.Format("yyyy-MM-dd hh:mm:ss"));

                    $(".nowValue").append(div);

                    var span=$('<span style="display: inline-block;transform:translateY(10px)">');
                    var avg=$('<span class="avg">'+value.data[i].alias+'平均值:</span>');
                    var num=$('<span class="num"></span>');
                    var danWei=$('<span class="danwei">'+value.data[i].unit+'</span>');
                    span.append(avg).append(num).append(danWei);
                    var chartDiv=$('<div  id="chart'+(i+1)+'" style="width: 100%;height: 200px;"></div>');
                    $(".data_curve").append(span).append(chartDiv);
                }else{
                    $(".nowValue div span:eq("+i+")").text(value.data[i].value+value.data[i].unit);
                    var date=new Date(value.data[i].time);
                    $(".nowValue .time").text(date.Format("yyyy-MM-dd hh:mm:ss"));
                }
                var param={id:"${id}",totalTime:$(".totalTime li.active").attr("time"),bh:(i+1)};
                loadHistoryData(historyUrl,param,value.data[i].name,value.data[i].unit);
            }
        });
    }

    function loadHistoryData(url,param,name,danWei) {
        url=url+"/"+param.bh;
        AsyncGet(url, param, function (value) {
            var xList = [];
            var yList = [];
            $.each(value.data, function (index, val) {
                xList.push(val.time);
                yList.push(val.value);
            });
            $("#chart" + param.bh).prev().find("span:eq(1)").text((getSum(yList) / yList.length).toFixed(4));
            var chart = echarts.init(document.getElementById("chart" + param.bh));
            chart.setOption(getOption(xList, yList, name, danWei));
        });
    }


    function change() {
        loadData("${basePath}/pc/sensor/waterSn","${basePath}/pc/sensor/history/waterSn");
    }

    $(function () {
        SyncGet("${basePath}/pc/user/getUserRole", null, function (value) {
            $(".username").text(value.data.username);
            if (value.data.userType == 3) {
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="7"><a>一周数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="30"><a>一月数据</a></li>');
            }else if (value.data.userType == 2) {
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
                $(".totalTime").append('<li style="cursor:pointer;" time="7"><a>一周数据</a></li>');
            }else{
                $(".totalTime").append('<li style="cursor:pointer;" time="1" class="active"><a>一天数据</a></li>');
            }
        })

        change();
        $(".totalTime").on("click","li",function () {
            if(!$(this).hasClass("active")){
                $(this).addClass("active").siblings().removeClass("active");
                change();
			}
        })

        function loadUser(url,indexName,redirect,ul) {
            AsyncGet(url,null,function (value) {
                for(var i=0;i<value.data.length;i++){
                    var index=value.data[i][indexName];
                    var id=value.data[i].id;
                    var li=$("<li></li>");
                    var a=$("<a></a>");
                    a.text(index+"号");
                    a.attr("href",redirect+"?index="+index+"&id="+id);
                    li.append(a);
                    ul.append(li);
                }
            })
        }
        loadUser("${basePath}/pc/sensor/getUserSensorGroupList","sensorGroupIndex",
            "${basePath}/function/pc/sensor",$(".dropdown-menu.sensorGroup"));
        loadUser("${basePath}/pc/sensor/getUserECList","sensorGroupIndex",
            "${basePath}/function/pc/ec",$(".dropdown-menu.ec"));
        loadUser("${basePath}/pc/monitor/getUserQjMonitorList","probeIndex",
            "${basePath}/function/pc/monitor",$(".dropdown-menu.qj"));
        loadUser("${basePath}/pc/monitor/getUserUjMonitorList","probeIndex",
            "${basePath}/function/pc/monitor",$(".dropdown-menu.uj"));
    })
</script>
</body>
</html>